<template>
  <el-drawer v-model="dialogVisible" title="学员列表" size="80%">
    <div class="common-seach-wrap">
      <el-form
        size="small"
        :inline="true"
        :model="query"
        class="demo-form-inline"
      >
        <el-form-item label="学员">
          <el-input
            type="text"
            v-model="query.user_name"
            placeholder="输入学员姓名或手机搜索"
            clearable
            :style="{ width: '200px' }"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="getTableInfo"
            >查询</el-button
          >
        </el-form-item>
      </el-form>
    </div>
    <el-table :data="tableData" row-key="id" height="90%" stripe>
      <el-table-column prop="user.real_name" label="姓名" fixed="left" />
      <el-table-column prop="user.mobile" label="电话" fixed="left" />
      <el-table-column prop="progress" label="当前进度" show-overflow-tooltip />
      <el-table-column
        prop="status_text"
        label="培训状态"
        show-overflow-tooltip
      />
      <el-table-column label="操作" fixed="right" width="300">
        <template #default="scope">
          <el-button
            type="primary"
            link
            icon="Edit"
            @click="handleLog(scope.row.user_id)"
          >
            培训记录
          </el-button>
          <el-button
            type="danger"
            link
            icon="Edit"
            @click="handleDone(scope.row.user_id)"
            v-auth="'train_edit'"
          >
            结束培训
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <LogDrawer ref="trainLogRef" />
  </el-drawer>
</template>

<script setup lang="ts">
import { doneTrainApi, getStudentAPi } from "@/api/company/train";
import LogDrawer from "./trainLog.vue";
import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
const dialogVisible = ref(false);
const tableData = ref([]);
const trainLogRef = ref<any>(null);
const query = ref({
  station_id: 0,
  user_name: "",
});
function getTableInfo() {
  getStudentAPi(query.value).then((res) => {
    tableData.value = res.data.data;
  });
}
const dialogOpen = (id: number) => {
  dialogVisible.value = true;
  query.value.station_id = id;
  getTableInfo();
};
const handleLog = (id: number) => {
  trainLogRef.value.dialogOpen(id);
};
const handleDone = (id: number) => {
  ElMessageBox.confirm("确定结束该学员的培训吗？", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    doneTrainApi(id).then(() => {
      ElMessage.success("操作成功");
      getTableInfo();
    });
  });
};
defineExpose({
  dialogOpen,
});
</script>

<style lang="scss">
.el-form-item {
  margin-bottom: 10px;
}
.el-select {
  width: 200px;
}
.upload-demo {
  .el-icon svg {
    height: 3em;
    width: 3em;
  }
}
</style>

<style lang="scss" scoped></style>
